<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页优化效果预览</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 375px;
            margin: 0 auto;
            background: #f5f5f5;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        .header {
            background: white;
            padding: 20px;
            text-align: center;
            border-bottom: 1px solid #eee;
        }
        
        .header h1 {
            color: #333;
            font-size: 18px;
            font-weight: 600;
        }
        
        .content {
            padding: 20px;
        }
        
        .calendar-card {
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            animation: slideInUp 0.6s ease-out;
        }
        
        .calendar-header {
            text-align: center;
            margin-bottom: 16px;
        }
        
        .date-main {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 4px;
        }
        
        .date-lunar {
            font-size: 14px;
            color: #666;
        }
        
        .calendar-info {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 16px;
        }
        
        .info-item {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #666;
        }
        
        .advice-section {
            border-top: 1px solid #eee;
            padding-top: 16px;
        }
        
        .advice-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 12px;
        }
        
        .advice-label {
            color: #666;
            min-width: 30px;
        }
        
        .advice-content {
            color: #333;
            flex: 1;
            text-align: right;
        }
        
        .menu-section {
            margin-bottom: 24px;
            animation: fadeInUp 0.8s ease-out;
        }
        
        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 12px;
            padding-left: 4px;
        }
        
        .menu-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }
        
        .menu-item {
            background: white;
            border-radius: 12px;
            padding: 16px 8px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: all 0.2s ease;
            cursor: pointer;
            animation: fadeInScale 0.6s ease-out;
        }
        
        .menu-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }
        
        .menu-item:active {
            transform: scale(0.95);
        }
        
        .menu-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 8px;
            font-size: 24px;
        }
        
        .menu-text {
            font-size: 12px;
            color: #666;
            line-height: 1.2;
        }
        
        .life-service .menu-icon { background: rgba(74, 144, 226, 0.1); }
        .search-tools .menu-icon { background: rgba(82, 196, 26, 0.1); }
        .mini-games .menu-icon { background: rgba(250, 173, 20, 0.1); }
        
        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.8);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        .menu-section:nth-child(2) { animation-delay: 0.1s; }
        .menu-section:nth-child(3) { animation-delay: 0.2s; }
        .menu-section:nth-child(4) { animation-delay: 0.3s; }
        
        .menu-item:nth-child(1) { animation-delay: 0.1s; }
        .menu-item:nth-child(2) { animation-delay: 0.2s; }
        .menu-item:nth-child(3) { animation-delay: 0.3s; }
        .menu-item:nth-child(4) { animation-delay: 0.4s; }
        .menu-item:nth-child(5) { animation-delay: 0.5s; }
        .menu-item:nth-child(6) { animation-delay: 0.6s; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>首页</h1>
        </div>
        
        <div class="content">
            <!-- 万年历卡片 -->
            <div class="calendar-card">
                <div class="calendar-header">
                    <div class="date-main">2024年1月15日</div>
                    <div class="date-lunar">农历腊月初五 星期一</div>
                </div>
                
                <div class="calendar-info">
                    <div class="info-item">
                        <span>生肖</span>
                        <span>龙年</span>
                    </div>
                    <div class="info-item">
                        <span>星座</span>
                        <span>摩羯座</span>
                    </div>
                    <div class="info-item">
                        <span>节气</span>
                        <span>小寒</span>
                    </div>
                    <div class="info-item">
                        <span>第几周</span>
                        <span>第3周</span>
                    </div>
                </div>
                
                <div class="advice-section">
                    <div class="advice-row">
                        <span class="advice-label">宜</span>
                        <span class="advice-content">祭祀 祈福 求嗣 开光 出行</span>
                    </div>
                    <div class="advice-row">
                        <span class="advice-label">忌</span>
                        <span class="advice-content">嫁娶 安床 开市 交易 入宅</span>
                    </div>
                </div>
            </div>
            
            <!-- 生活服务 -->
            <div class="menu-section life-service">
                <div class="section-title">生活服务</div>
                <div class="menu-grid">
                    <div class="menu-item">
                        <div class="menu-icon">📰</div>
                        <div class="menu-text">每日新闻</div>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon">📅</div>
                        <div class="menu-text">历史上的今天</div>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon">🎭</div>
                        <div class="menu-text">搞笑段子</div>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon">✨</div>
                        <div class="menu-text">精美语句</div>
                    </div>
                </div>
            </div>
            
            <!-- 查询工具 -->
            <div class="menu-section search-tools">
                <div class="section-title">查询工具</div>
                <div class="menu-grid">
                    <div class="menu-item">
                        <div class="menu-icon">🎲</div>
                        <div class="menu-text">彩票查询</div>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon">🏖️</div>
                        <div class="menu-text">节假日查询</div>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon">💱</div>
                        <div class="menu-text">实时汇率</div>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon">⛽</div>
                        <div class="menu-text">油价查询</div>
                    </div>
                </div>
            </div>
            
            <!-- 小游戏 -->
            <div class="menu-section mini-games">
                <div class="section-title">小游戏</div>
                <div class="menu-grid">
                    <div class="menu-item">
                        <div class="menu-icon">🎮</div>
                        <div class="menu-text">2048</div>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon">🐟</div>
                        <div class="menu-text">电子木鱼</div>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon">🖼️</div>
                        <div class="menu-text">美图秀秀</div>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon">📚</div>
                        <div class="menu-text">故事大全</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="content">
            <!-- 天气页面预览 -->
            <div class="menu-section" style="animation-delay: 0s;">
                <div class="section-title">天气页面UI预览</div>
                <div class="calendar-card" style="background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.3));">
                    <div class="calendar-header" style="color: white;">
                        <div class="date-main">武汉市</div>
                        <div class="date-lunar">晴 | 28°C | 湿度 60%</div>
                    </div>
                </div>

                <div class="menu-section" style="animation-delay: 0.1s;">
                    <div class="section-title">未来天气</div>
                    <div class="menu-grid">
                        <div class="menu-item" onclick="alert('点击反馈：周一')">
                            <div class="menu-icon" style="background: rgba(74,144,226,0.1);">☀️</div>
                            <div class="menu-text">周一<br/>晴 26°C</div>
                        </div>
                        <div class="menu-item" onclick="alert('点击反馈：周二')">
                            <div class="menu-icon" style="background: rgba(82,196,26,0.1);">⛅</div>
                            <div class="menu-text">周二<br/>多云 25°C</div>
                        </div>
                        <div class="menu-item" onclick="alert('点击反馈：周三')">
                            <div class="menu-icon" style="background: rgba(250,173,20,0.1);">🌧️</div>
                            <div class="menu-text">周三<br/>小雨 22°C</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 结束：天气页面预览 -->
        </div>
    </div>
    
    <script>
        // 添加点击反馈效果
        document.querySelectorAll('.menu-item').forEach(item => {
            item.addEventListener('click', function() {
                this.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    this.style.transform = '';
                }, 150);
                
                // 模拟功能提示
                const text = this.querySelector('.menu-text').textContent;
                if (['彩票查询', '节假日查询', '实时汇率', '油价查询', '历史上的今天'].includes(text)) {
                    alert(`${text}功能开发中，敬请期待...`);
                } else {
                    alert(`正在跳转到${text}页面...`);
                }
            });
        });
    </script>
</body>
</html>